<!--
* @Author: yx
* @Description: 查询表单&表格
* 特别注意: 1.yx-container容器组件，不能放在对话框等弹框组件里,内置了固定宽度；想要放，可自己包裹个class再改容器的样式。
*          2.yx-common 开头才是公共样式
-->
<template>
  <div class="form-table">
    <yx-container layout="center" :spacing="2">
      <div class="yx-common-formwork__select-form">
        <yx-select-form
          @handle-submit="handleSubmit"
          :right-button-width="160"
          :model="model"
          :data="selectFormdata"
          :rules='rules'
          :label-suffix="$labelSuffix"
        >
        </yx-select-form>
      </div>

      <div class="yx-common-formwork__button-table">
        <el-button size="mini" type="primary">新增</el-button>
        <el-button size="mini" type="warning" plain>禁用</el-button>
        <el-button size="mini" type="danger" plain>删除</el-button>
        <el-button size="mini" plain>导出</el-button>
        <el-button size="mini" plain>导入</el-button>
        <yx-table-pagination
          class="yx-common-formwork__table"
          @btn-operate="btnOperate"
          @current-change="currentChange"
          :page-size="pageSize"
          :columns="columns"
          :data="tableData"
          :button="button"
        >
        </yx-table-pagination>
      </div>
    </yx-container>
  </div>
</template>

<script>
export default {
  name: 'form-table',
  data () {
    return {
    /* -----------表格------------ */
      // 表头
      columns: [
        {
          label: 'Name',
          prop: 'name',
          type: 'tree'
        },
        {
          label: 'Name',
          prop: 'name'
        },
        {
          label: 'Age',
          prop: 'age',
          sortable: 'custom', // 接受一个Boolean，默认为false,如果需要后端排序，需将sortable设置为custom
          filters: [{ text: 18, value: 18 }, { text: 19, value: 19 }, { text: 20, value: 20 }]
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        }
      ],
      // 表格
      tableData: [
        {
          id: 1,
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03'
        },
        {
          id: 2,
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'

        },
        {
          id: 3,
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02'
        },
        {
          id: 4,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        },
        {
          id: 5,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        },
        {
          id: 6,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'

        },
        {
          id: 7,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        },
        {
          id: 8,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        }
      ],
      // 表格按钮
      button: [
        {
          value: '新增',
          type: 'text'
        },
        {
          value: '查看',
          type: 'text'
        },

        {
          value: '修改',
          type: 'text'
        },
        {
          value: '删除',

          type: 'text'
        }
      ],
      // 分页的页码
      pageSize: 20,

      /* -----------查询表单------------ */
      model: {
        name: '',
        department: '',
        status: [], // checkbox是多选的时候，声明时一定要写成数组形式，否则会出现选一个全部勾选情况。
        address: '',
        date: '',
        time: ''
      },

      selectFormdata:
        [
          {
            label: '统一社会信用代码',
            prop: 'name',
            type: 'input',
            maxlength: 5 // 输入长度的限制
          },

          {
            label: '所属部门',
            prop: 'department',
            type: 'select',
            option: [
              {
                label: '北京市',
                value: 'beijing'
              },
              {
                label: '上海市',
                value: 'shanghai'
              },
              {
                label: '深圳市',
                value: 'shenzhen'
              }
            ]
          },
          {
            label: '状态',
            prop: 'status',
            type: 'checkbox',
            option: [
              {
                label: '北京市',
                value: 'beijing1'
              },
              {
                label: '上海市',
                value: 'shanghai2'
              }
              // {
              //   label: '深圳市',
              //   value: 'shenzhen3'
              // }
            ]
          },
          {
            label: '地址',
            prop: 'address',
            type: 'radio',
            option: [
              {
                label: '北京市',
                value: 'beijing'
              },
              {
                label: '上海市',
                value: 'shanghai'
              }
              // {
              //   label: '深圳市',
              //   value: 'shenzhen'
              // }
            ]
          },
          {
            label: '日期',
            prop: 'date',
            type: 'date'
            // pickerType: 'date', //类型可选为:date、datetime
            // valueFormat: 'yyyy-MM', //输出值的格式转换
            // format: 'yyyy-MM'//选择框里的值的格式转换
          },
          {
            label: '时间',
            prop: 'time',
            type: 'time'
            // valueFormat: 'mm:ss', //输出值的格式转换
            // format: 'mm:ss'//选择框里的值的格式转换
          }
        ],
        rules: {
          department: [
            { required: true, message: '请选择所属部门', trigger: 'blur' }
        ]
        }
    }
  },
  methods: {
    // 查询表单的事件
    handleSubmit (emit) {
      console.log(emit)
    },

    // 表格上的按钮的点击事件
    btnOperate (emit) {
      console.log(emit)
      // this.visible = !this.visible
    },

    // 分页切换
    currentChange (emit) {
      console.log(emit)
    }
  }
}

</script>
